<template>
  <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" :ellipsis="false" @select="handleSelect">

    <template v-for="(item, index) in headMenu">
      <el-menu-item v-if="item.subMenu == undefined" :index="index">
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        {{ item.name }}
      </el-menu-item>

      <el-sub-menu :index="index" v-if="item.subMenu != undefined">
        <template #title>
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          {{ item.name }}
        </template>

        <el-menu-item :index="`${index}-${subindex}`" v-for="(subItem, subindex) in item.subMenu">
          <el-icon v-show="subItem.icon != undefined || subItem.svgsrc != undefined">
            <component :is="subItem.icon" v-show="subItem.icon != undefined" />
            <img class="el-icon" :src="subItem.svgsrc" v-show="subItem.svgsrc != undefined" />
          </el-icon>
          {{ subItem.name }}
        </el-menu-item>
      </el-sub-menu>
    </template>

  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import { headMenu } from '/src/tools/data.js'

const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

</script>

<style scoped>
.el-menu--horizontal>.el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>